<template>
	<view class="search-bar">
		<u-search v-model="keyword" placeholder="搜索" shape="round" bgColor="#FCFCFC" :clearabled="true"
			:showAction="showAction" actionText="取消" @search="search" @custom="cancel" @focus="showAction=true">
		</u-search>
	</view>
</template>

<script>
	export default {
		name: "search-bar",
		props:["msgList"],
		data() {
			return {
				keyword: '',
				showAction: false,
				allMsgList: []
			};
		},
		mounted() {
			this.allMsgList = this.msgList;
		},
		onLoad() {
			uni.$on("addMsg", msg => {
				this.allMsgList.push(msg);
			});
		},
		methods: {
			search() {
				let res = [];
				this.allMsgList.forEach((item) => {
					if(item.name.indexOf(this.keyword) > -1
					|| item.content.indexOf(this.keyword) > -1){
						res.push(item);
					}
				});
				if(res.length === 0){
					uni.showToast({
						title: "结果为空",
						icon: 'none'
					});
				}
				this.$emit("searchMsg", res);

			},
			cancel() {
				this.showAction = false;
				this.$emit("searchMsg", this.allMsgList);
			}
		}
	}
</script>

<style>
	.search-bar {
		/* border: 1px solid red; */
		padding: 0 6px;
		margin: 10px;
	}
</style>
